<template>
  <div>
    <Nav></Nav>
    <div class="container layout layout-margin-top">
      <!-- 面包屑 -->
      <ol class="breadcrumb">
        <li><a href="/paths/">学习路径</a></li>
        <li class="active"><a href="/paths/newhand">{{path.title}}</a></li>
      </ol>

      <div class="row">
        <!-- 路径信息 -->
        <div class="col-md-9 layout-body">
          <!-- 路径简介 -->
          <div
            class="content"
            style="padding:0px"
          >
            <div
              class="path-description"
              style="margin:0px"
            >
              <div class="path-desc-top clearfix">
                <div class="name-total-box clearfix">
                  <div class="col-md-6 col-sm-6 col-md-offset-1 path-name">
                    <h4>{{path.title}}</h4>
                  </div>
                  <div class="col-md-3 col-sm-6 col-md-offset-1 path-total-courses">
                    <span class="total-courses-box">课程 <span class="num">{{path.courseTotal}}</span></span>
                  </div>
                </div>
                <div class="col-md-10 col-md-offset-1 path-desc-text">{{path.desc}}</div>
              </div>
              <div class="path-desc-btm">
                <div class="col-sm-12 col-md-4 clearfix learn-time-div">
                  <div class="col-md-12 text-left need-learn-time">预计需要 <span class="num">{{path.needTime}}</span> 小时学习</div>
                </div>
                <div
                  class="col-sm-12 col-md-8  clearfix text-right"
                  style="padding-top:0px"
                >
                  <div class="col-xs-12">

                    <a
                      class="btn btn-path-operation btn-join-path"
                      data-sign="signin"
                      href="#sign-modal"
                      data-toggle="modal"
                    >加入路径</a>

                    <p style="font-size:10px;margin-top:5px">加入获得路径课程更新提醒</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 路径内容 -->
          <div class="content">
            <!-- 标签 -->
            <ul class="nav nav-tabs">
              <li class="active">
                <a>路径详情</a>
              </li>
              <li role="presentation">
                <a>路径评论(<span class="comments-count">0</span>)</a>
              </li>
            </ul>
            <div class="tab-content">
              <!-- 路径阶段 -->
              <div class="tab-pane path-details active">
                <div class="details-box">
                  <a class="btn start-btn">开始学习</a>
                  <div
                    v-for="stage in path.stages"
                    :key="stage.id"
                  >
                    <div class="clearfix text-center path-title-box">
                      <span class="line hidden-xs"></span>
                      <span>{{stage.title}}</span>
                      <span class="line hidden-xs"></span>
                    </div>
                    <div class="row">
                      <Course
                        v-for='course in stage.courses'
                        :key='course.id'
                        :course='course'
                      ></Course>
                    </div>
                  </div>

                  <div class="btn end-pin">完成学习</div>
                </div>
              </div>
              <!-- 路径评论 -->
              <div class="tab-pane path-comment">
                <div class="comment-box">
                  <div class="comment-form">
                    <div class="comment-form-unlogin">
                      请
                      <a
                        href="#sign-modal"
                        data-toggle="modal"
                        data-sign="signin"
                      > 登录 </a>
                      后发表评论
                    </div>

                  </div>
                  <div class="comment-title">最新评论</div>
                  <div class="comment-list"></div>
                  <div class="pagination-container"></div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <!-- 侧边栏 -->
        <div class="col-md-3 layout-side">
          <!-- 登录/注册 -->
          <div class="panel panel-default panel-userinfo">
            <div class="panel-body body-userinfo">
              <div class="media userinfo-header">
                <div class="media-left">
                  <div class="user-avatar">

                    <a
                      class="avatar"
                      href="#sign-modal"
                      data-toggle="modal"
                      data-sign="signin"
                    >
                      <img
                        class="circle"
                        src="@/assets/img/logo-grey.png"
                      >
                    </a>

                  </div>
                </div>
                <div class="media-body">

                  <span class="media-heading username">欢迎来到实验楼</span>
                  <p class="vip-remain">做实验，学编程</p>

                </div>
              </div>

              <div class="row userinfo-data">

                <hr>
                <div class="btn-group-lr">
                  <a
                    href="#sign-modal"
                    type="button"
                    class="btn btn-success col-md-5 col-xs-6 login-btn"
                    data-toggle="modal"
                    data-sign="signin"
                  >登录</a>
                  <a
                    href="#sign-modal"
                    type="button"
                    class="btn btn-success col-md-5 col-xs-6 col-md-offset-1 register-btn"
                    data-toggle="modal"
                    data-sign="signup"
                  >注册</a>
                </div>

              </div>

              <div class="userinfo-footer row">
                <div class="col-md-6 col-xs-6 pos-left">

                  <a
                    href="#sign-modal"
                    data-toggle="modal"
                    data-sign="signin"
                  ><span class="glyphicon glyphicon-bookmark"></span> 加入私有课</a>

                </div>
                <div class="col-md-6 col-xs-6 pos-right">
                  <a
                    href="/contribute"
                    target="_blank"
                  ><span class="glyphicon glyphicon-send"></span> 我要投稿</a>
                </div>

                <div
                  id="join-private-course"
                  class="modal fade words-ctrl"
                  tabindex="-1"
                  role="dialog"
                >
                  <div
                    class="modal-dialog"
                    role="document"
                  >
                    <div class="modal-content">
                      <div class="modal-header">
                        <h4 class="modal-title">加入私有课</h4>
                      </div>
                      <div class="modal-body">
                        <div style="margin:15px 0; font:16px;">输入教师提供的私有课程码可以加入教师的私有课程。</div>
                        <form
                          id="private-course-form"
                          method="POST"
                          action="/courses/join"
                        >
                          <div class="form-group">
                            <label for="code">邀请码</label>
                            <input
                              class="form-control"
                              id="code"
                              name="code"
                              type="text"
                              value=""
                            >
                            <input
                              name="_csrf_token"
                              type=hidden
                              value="1483796689##5dfe74a8992e829e903291b65bbbdabafa60f4e1"
                            >
                          </div>
                        </form>

                      </div>
                      <div class="modal-footer">
                        <button
                          type="button"
                          class="btn btn-default"
                          data-dismiss="modal"
                        >取消</button>
                        <button
                          type="button"
                          class="btn btn-primary"
                          onclick="document.getElementById('private-course-form').submit();"
                        >确定</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 最热路径 -->
          <div class="sidebox">

            <div class="sidebox-header">
              <h4 class="sidebox-title">最热路径</h4>
            </div>
            <div class="sidebox-body course-content side-list-body">
              <a
                href="/paths/python"
                v-for='hotpath in hotPaths'
                :key="hotpath.id"
              ><img
                  style="width:25px;height:25px"
                  :src="hotpath.img"
                > {{hotpath.title}}</a>
            </div>

          </div>
          <!-- 二维码 -->
          <div class="side-image side-qrcode">
            <img src="@/assets/img/ShiyanlouQRCode.png">
            <div class="side-image-text">关注公众号，手机看教程</div>
          </div>

        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Nav from '@/components/Nav'
import Footer from '@/components/Footer'
import Course from '@/components/Course'
export default {
  components: {
    Nav,
    Footer,
    Course
  },
  data() {
    return {
      path: {
        id: 1,
        title: '新手入门', // 路径名称
        courseTotal: 99, // 路径总课程
        desc: '新手入门路径帮助对 IT 技术感兴趣的新手0基础入门计算机编程。本路径通过新手入门、Linux 及 Vim课程熟悉实验楼的实践学习环境，再以 C 语言和一个简单的项目引导你一步步进入计算机技术的殿堂。', // 路径描述
        needTime: 31, // 需要小时数
        stages: [
          {
            id: 1,
            title: '阶段1：基础知识',
            sort: 1,
            courses: [
              {
                id: 1,
                title: '新手指南之玩转实验楼',
                img: 'https://dn-simplecloud.shiyanlou.com/ncn63.jpg',
                isMember: false,
                isBootcamp: false,
                totalNum: 1234
              },
              {
                id: 2,
                title: 'Linux 基础入门（新版）',
                img: 'https://dn-simplecloud.shiyanlou.com/ncn1.jpg',
                isMember: false,
                isBootcamp: false,
                totalNum: 52879
              }
            ]
          },
          {
            id: 2,
            title: '阶段2：编程语言',
            sort: 2,
            courses: [
              {
                id: 3,
                title: 'Kali 渗透测试 - 后门技术实战（10个实验）',
                img: 'https://dn-simplecloud.shiyanlou.com/1480389303324.png',
                isMember: false,
                isBootcamp: true,
                totalNum: 56378
              },
              {
                id: 4,
                title: 'Kali 渗透测试 - Web 应用攻击实战',
                img: 'https://dn-simplecloud.shiyanlou.com/1480389165511.png',
                isMember: true,
                isBootcamp: true,
                totalNum: 1234
              }
            ]
          },
          {
            id: 3,
            title: '阶段3：入门项目',
            sort: 3,
            courses: [
              {
                id: 14,
                title: 'Metasploit实现木马生成、捆绑及免杀',
                img: 'https://dn-simplecloud.shiyanlou.com/1481512189119.png',
                isMember: true,
                isBootcamp: false,
                totalNum: 1234
              },
              {
                id: 15,
                title: 'Python 3 实现 Markdown 解析器',
                img: 'https://dn-simplecloud.shiyanlou.com/1480644410422.png',
                isMember: true,
                isBootcamp: false,
                totalNum: 1234
              }
            ]
          }
        ]
      },
      hotPaths: [
        {
          id: 1,
          title: 'Python 研发工程师',
          img: 'http://iopsyche.gitee.io/static/syl/assets/img/1471513769430.png'
        },
        {
          id: 2,
          title: '大数据工程师',
          img: 'http://iopsyche.gitee.io/static/syl/assets/img/1471513926288.png'
        }
      ]

    }
  }
}
</script>
<style>
.container {
  text-align: left;
}
.path-desc-top {
  /* background: url("http://gitee.io/iopysche/static/syl/assets/img/1471513740139.png")
    no-repeat; */
  background: url("~@/assets/img/1471513740139.png");
  background-size: cover;
}
</style>
